<template>
  <a-modal width="320px" :open="visible" title="登录" :footer="null" @cancel="onCancel">
    <a-form
      class="Box login"
      :model="data"
      name="basic"
      autocomplete="off"
      @finish="onLoign"
    >
      <a-form-item
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="data.username" placeholder="用户名" />
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="data.password" placeholder="密码" />
      </a-form-item>

      <a-form-item>
        <a-button block type="primary" html-type="submit">登 录</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { reactive } from 'vue';
import {login} from '@/api';

defineProps({
  visible: Boolean
})

const emit = defineEmits(['close'])

const data = reactive({
  username: '',
  password: '',
});

const onLoign = async(body: any) => {
  const res = await login(JSON.parse(JSON.stringify(body)));
  if (res.data) {
    message.success('登录成功');
    data.username = ''
    data.password = ''
    onCancel()
  } else {
    // message.error('登录失败，但我不告诉你为什么～');
  }
};

const onCancel = () => {
  emit('close')
}
</script>

<style scoped>
</style>

